<template>
	<view class="page">
		<view class="Registrationcard">
			<view class="docInfo">
				<image style="width: 90rpx;"
					:src="doctorInfo.avator"
					mode="widthFix"></image>
				<view class="textInfo">
					<view class="name_call">
						<view class="name">
							{{doctorInfo.name}}
						</view>
						<view class="call">
							{{doctorInfo.call}}
						</view>
					</view>
					<view class="depart_campus">
						<view class="depart">
							{{doctorInfo.depart}}
						</view>
						<view class="campus">
							{{campus}}
						</view>
					</view>
				</view>
			</view>
			<image style="width: 608rpx; margin: 20rpx 0;"
				src="https://cdn8.axureshop.com/demo/2208121/images/%E7%A1%AE%E8%AE%A4%E9%A2%84%E7%BA%A6/u1034.svg"
				mode="widthFix"></image>
			<view class="otherInfo">
				<view class="line">
					<view class="title">
						预约时间
					</view>
					<view class="content">
						{{dateInfo.dates.year}}-{{dateInfo.dates.month<10?'0'+dateInfo.dates.month:dateInfo.dates.month}}-{{dateInfo.dates.day<10?'0'+dateInfo.dates.day:dateInfo.dates.day}} {{dateInfo.farewell=='上午'?'08:30-12:00':'14:00-18:00'}}({{dateInfo.farewell}})
					</view>
				</view>
				<view class="line">
					<view class="title">
						就诊科室
					</view>
					<view class="content">
						{{doctorInfo.depart}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						挂号费用
					</view>
					<view class="price">
						￥{{doctorInfo.price.toFixed(2)}}
					</view>
				</view>
			</view>
		</view>
		<!-- 就诊人 -->
		<view class="patient">
			<view class="title">
				就诊人
			</view>
			<view class="name"  @click="open">
				{{userInfo.name}} >
			</view>
		</view>
		<!-- 添加就诊人信息 -->
		<uni-popup ref="popup" type="bottom" background-color="#fff" class="popup">
			<view class="popup-content">
				<!-- <text class="text">popup 内容</text> -->
				<view class="title">
					选择就诊人
				</view>
				<image class="close" @click="close" src="https://cdn8.axureshop.com/demo/2208121/images/%E7%A1%AE%E8%AE%A4%E9%A2%84%E7%BA%A6/u1063.svg" mode="widthFix"></image>
				<view class="patientlists">
					<view class="patientlist" @click="selectPatient(patientinfo)">
						<view class="patient_name">
							{{patientinfo.name}}
						</view>
						<view class="patient_card">
							{{patientinfo.idcard.slice(0,4)+'****'+patientinfo.idcard.slice(-2)}}
						</view>
					</view>
					<view class="patientlist" v-for="(item,index) in families" :key="index" @click="selectPatient(item)">
						<view class="patient_name">
							{{item.name}}
						</view>
						<view class="patient_card">
							{{item.idcard.slice(0,4)+'****'+item.idcard.slice(-2)}}
						</view>
					</view>
				</view>
				<!-- 添加就诊人 -->
				<button type="primary" class="addpatient">添加就诊人</button>
			</view>
		</uni-popup>
		<!-- 支付方式 -->
		<view class="Paymentmethod">
			<view class="title">
				支付方式
			</view>
			<uv-radio-group v-model="radiovalue" class="methods" @change="see">
				<view class="method">
					<view class="name">
						自费支付
					</view>
					<uv-radio name="自费支付"></uv-radio>
				</view>
				<view class="method">
					<view class="name">
						医保支付
					</view>
					<uv-radio name="医保支付"></uv-radio>
				</view>
			</uv-radio-group>
		</view>
		
		
		<!-- 确认预约按钮 -->
		<button class="confirm" @click="confirm">确认预约</button>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { getWeekDates } from '../../src/utils/date.js'
	import api from '../../src/utils/api.js'
	const weekDates = getWeekDates()
	const dateInfo = reactive({
		dates:{},
		farewell:''
	})	//日期信息
	const doctorInfo = ref({
		price:100
	})
	const campus = uni.getStorageSync('campus')
	const optionInfo = ref({
		dateInfo:'',
		doctorID:'',
		farewell:''
	})
	const patientinfo = ref({
		idcard:'',
		name:'',
	})
	onLoad((option)=>{
		optionInfo.dateInfo=option.dateInfo
		optionInfo.doctorID = option.doctorID
		optionInfo.farewell = option.farewell
		dateInfo.dates = weekDates[option.dateInfo]
		dateInfo.farewell = option.farewell
		api('/doctorinfoApp',{
			doctorID:option.doctorID
		}).then(res=>{
			doctorInfo.value = res[0]
		}).catch(err=>{
			console.log(err)
		})
		// 获取就诊人信息
		api('/appselectid',{
			userid:uni.getStorageSync('userid')
		}).then(res=>{
			userInfo.value = res.data[0]
			patientinfo.value = res.data[0]
		}).catch(err=>{
			console.log(err)
		})
	})
	// 支付方式切换
	const radiovalue = ref('自费支付')
	const see = () => {
		console.log(radiovalue.value)
	}
	const memberid = ref(0) //就诊人选择id
	// 确认预约
	const confirm = () => {
		// console.log(doctorInfo.value,patientinfo.value,353535)
		// console.log('确认预约',uni.getStorageSync('userid'),doctorInfo.value)
		// console.log(memberid.value==0?patientinfo.value.user_id:memberid.value,1111)
		api('/appselectpatientid',{
			memberid:memberid.value,
			userid:uni.getStorageSync('userid')
		}).then(res=>{
			console.log(res.datas[0].patient_id)
			api('/appoffernuminsert',{
				avator:doctorInfo.value.avator,
				name:doctorInfo.value.name,
				call:doctorInfo.value.call,
				depart:doctorInfo.value.depart,
				patient:patientinfo.value.name,
				patient_id:res.datas[0].patient_id,
				registortime:(dateInfo.dates.year)+'-'+(dateInfo.dates.month<10?'0'+dateInfo.dates.month:dateInfo.dates.month)+'-'+(dateInfo.dates.day<10?'0'+dateInfo.dates.day:dateInfo.dates.day)+' '+(dateInfo.farewell=='上午'?'08:30-12:00':'14:00-18:00')
			},'POST').then(res=>{
				console.log(res,33333333)
			}).catch(err=>{
				console.log(err)
			})
		}).catch(err=>{
			console.log(err)
		})
		uni.showLoading({
			title: '加载中'
		});
		api('/appregisterlist',{
			userID:uni.getStorageSync('userid'),
			memberid:memberid.value,
			...doctorInfo.value,
			...dateInfo
		},'POST').then(res=>{
			// console.log(res)
			if(res.state==200){
				uni.hideLoading();
				api('/schecusreduce',{
					docID:doctorInfo.value.doctor_id,
					dateID:dateInfo.dates.id,
					farewell:dateInfo.farewell
				},'POST').then(res=>{
					if(res.state==200){
						uni.showToast({
							title: '挂号成功',
							duration: 2000
						});
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/Registration_details/Registration_details?'+new URLSearchParams(optionInfo).toString()
							})
						},2000)
					}
				}).catch(err=>{
					console.log(err)
				})
				
			}
		}).catch(err=>{
			console.log(err)
		})
		
	}
	
	// 添加就诊人
	const userInfo = ref({
		idcard:'',
		name:'',
	})
	const families = reactive([])
	const popup = ref(null)
	const open = () => {
		families.splice(0)
		api('/appfamily',{
			userid:uni.getStorageSync('userid')
		}).then(res=>{
			console.log(res)
			families.push(...res)
			console.log(families)
		}).catch(err=>{
			console.log(err)
		})
		popup.value.open()
	}
	// 选择就诊人
	const selectPatient = (userinfo) => {
		console.log(userinfo,3333)
		userInfo.value = userinfo
		if(userinfo.member_id){
			memberid.value = userinfo.member_id
		}else{
			memberid.value = 0
		}
		popup.value.close()
	}
	const close = () => {
		popup.value.close()
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 36rpx 30rpx;
		box-sizing: border-box;
		background-color: rgba(242, 242, 242, 1);
		min-height: 100vh;

		.Registrationcard {
			width: 100%;
			height: 432rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 36rpx 44rpx;
			box-sizing: border-box;

			.docInfo {
				display: flex;

				.textInfo {
					margin-left: 40rpx;
					font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
					color: #000;
					font-size: 28rpx;

					.name_call {
						display: flex;
						align-items: baseline;

						.name {
							width: 118rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 36rpx;
							font-weight: 700;
						}

						.call {
							width: 114rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 26rpx;
							color: #1f1f1f;
							margin-left: 36rpx;
						}
					}

					.depart_campus {
						display: flex;
						align-items: center;
						color: #1f1f1f;
						height: 40rpx;
						margin-top: 6rpx;

						.campus {
							margin-left: 30rpx;
						}
					}
				}
			}

			.otherInfo {
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #000;

				.line {
					height: 20rpx;
					align-items: center;
					display: flex;
					margin-bottom: 46rpx;

					.title {
						color: #7F7F7F;
						margin-right: 60rpx;
					}

					.price {
						color: #FFC53D;
					}
				}
			}
		}

		// 就诊人
		.patient {
			width: 100%;
			height: 100rpx;
			background-color: #fff;
			border-radius: 16rpx;
			margin: 32rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 44rpx;
			box-sizing: border-box;
			font-family: 'Microsoft YaHei UI', sans-serif;
			font-size: 28rpx;
			color: #1f1f1f;

			.title {
				color: #7f7f7f;
			}
		}

		// 支付方式
		.Paymentmethod {
			width: 100%;
			height: 312rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 30rpx 44rpx;
			box-sizing: border-box;
			font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
			font-size: 28rpx;
			color: #000;

			.title {
				font-weight: 700;
				margin-bottom: 20rpx;
			}

			.methods {
				display: block !important;

				.method {
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}

		.confirm {
			// width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			font-family: 'Microsoft YaHei UI', sans-serif;
			font-size: 28rpx;
			color: #fff;
			background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E7%A1%AE%E8%AE%A4%E9%A2%84%E7%BA%A6/u1058.svg') !important;
			background-size: cover !important;
			position: absolute;
			bottom: 40rpx;
			left: 30rpx;
			right: 30rpx;
		}
		.popup{
			
			.popup-content {
				// display: flex;
				// flex-direction: column;
				// align-items: center;
				// justify-content: center;
				border-radius: 72rpx 72rpx 0 0;
				padding: 30rpx 45rpx 0;
				box-sizing: border-box;
				height: 804rpx;
				background-color: #fff;
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				position: relative;
				.title{
					font-size: 32rpx;
					font-weight: 700;
					width: 100%;
					text-align: center;
				}
				.close{
					width: 32rpx;
					position: absolute;
					right: 45rpx;
					cursor: pointer;
					top: 38rpx;
				}
				
				.patientlists{
					margin-top: 60rpx;
					.patientlist{
						width: 660rpx;
						height: 92rpx;
						border-radius: 16rpx;
						padding: 0 30rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						background-color: rgba(230, 244, 255, 1);
						font-size: 28rpx;
						font-family: 'Microsoft YaHei UI', sans-serif;
						margin-bottom: 40rpx;
						.patient_card{
							margin-left: 20rpx;
							color: #aaa;
						}
					}
				}
				.addpatient{
					width: 660rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					color: #fff;
					background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u579.svg');
					background-size: cover;
					position: absolute;
					bottom: 40rpx;
				}
			}
		}
		
	}
</style>